<template>
  <div>
    <Category :style="{ marginBottom: '20px' }" :disabled="showIndex !== 0" />
    <Spulist v-if="showIndex === 0" @changeIndex="changeIndex" />
    <Spuinfo
      v-else-if="showIndex === 1"
      @changeIndex="changeIndex"
      :spuinfo="spuinfo"
    />
    <Skuinfo @changeIndex="changeIndex" :spuinfo="spuinfo" v-else />
  </div>
</template>

<script>
import Spulist from "./components/Spulist.vue";
import Spuinfo from "./components/Spuinfo.vue";
import Skuinfo from "./components/Skuinfo";
export default {
  name: "Spu",
  components: {
    Spulist,
    Skuinfo,
    Spuinfo
  },
  data() {
    return {
      showIndex: 0,
      spuinfo: {}
    };
  },
  methods: {
    async changeIndex(index, row) {
      if (row) {
        this.spuinfo = row;
        this.spuinfo.spuSaleAttrList = [];
      } else {
        this.spuinfo = {
          category3Id: this.category3id,
          description: "",
          spuName: "",
          tmId: "",
          spuSaleAttrList: [],
          spuImageList: []
        };
      }
      this.showIndex = index;
    }
  }
};
</script>

<style></style>
